<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Color mixer</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="colorSpaces.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
<script type="text/javascript" src="colors.js"></script>
</head>
<body>
<span class="colorPicker template">
<input type="text" class="hashInput" value="#ffffff"/><span class="sample"></span>
<img class="valSat" src="valueSaturation.png" width="256" height="256"/><img class="hue" src="hue.png" width="16" height="256"/>
<div class="crosshair valSatCrosshair"></div>
<div class="crosshair hueCrosshair"></div>
</span>
<div class="pickerLeft">
</div>
<div class="pickerRight">
</div>
<div id="gradient"></div>
<div class="mixer">
	<span class="leftSample"></span>
	<input type="text" class="alpha" value="0"/><input type="text" class="hashRGB" readonly="readonly"/><input type="text" class="rgb" readonly="readonly"/>
	<span class="rightSample"></span>
</div>
<div class="colorAsImage">
Alpha: <input type="text" id="alphaValue" value="255"/>
Image with alpha:
<img
	src="data:image/png,%89%50%4e%47%0d%0a%1a%0a%00%00%00%0d%49%48%44%52%00%00%00%01%00%00%00%01%08%06%00%00%00%1f%15%c4%89%00%00%00%01%73%52%47%42%00%ae%ce%1c%e9%00%00%00%10%49%44%41%54%08%1d%01%05%00%fa%ff%00%c5%c7%d3%df%07%f3%03%3f%d8%a8%07%66%00%00%00%00%49%45%4e%44%ae%42%60%82"
	class="colorAsImage"/>
</div>
</body>
</html>
